<template>
	<view class="team-box">
		<view class="user-info">
			<view class="user-info-card">
				<view class="user-info-head">
					<image class="head-img"
						:src="!userInfo.avatar ? '/static/default-avatar.png' : userInfo.avatar.external_url" alt="" />
					<view class="head-info">
						<view class="head-name">
							<text>{{ userInfo.nick_name }}</text>
							<view v-if="userInfo.level === 0" class="ordinary-user" @click="rankRule">
								普通用户
							</view>
							<image v-else style="height: 16px;background-color: #fff;border-radius: 20px; margin-left: 8px;"
								:src="levelList[userInfo.level]" mode="heightFix" @click="rankRule" />
						</view>
						<view class="inviter">
							我的邀请人：{{ userInfo.p_mobile }}
						</view>
					</view>
				</view>
				<view class="user-info-content">
					<view class="push-title direct-push">
						<text>我的订单</text>
						<text>{{ userInfo.order_mun }}单</text>
					</view>
					<view class="push-title indirect-push">
						<text>直推订单</text>
						<text>{{ userInfo.direct_order_count }}单</text>
					</view>
					<view class="push-title total">
						<text>间推订单</text>
						<text>{{ userInfo.interposition_order_count }}单</text>
					</view>
				</view>
				<view class="user-info-foot">
					<view class="total-people">
						团队总人数：{{ userInfo.tan_count }}
					</view>
					<view class="interval"></view>
					<view class="total-order">
						团队总订单：{{ userInfo.tan_order_mun }}
					</view>
				</view>
			</view>
		</view>
		<view class="">
			<view class="uni-padding-wrap uni-common-mt">
				<uni-segmented-control :current="current"
					:values="[`直推人数（${userInfo.direct_count}）`, `间推人数（${userInfo.interposition_count}）`]"
					style-type="text" active-color="#101010" @clickItem="onClickItem" />
			</view>
			<view class="content">
				<view v-if="current === 0">
					<Detail :userLists="userLists" :search="search" :clear="clear" :levelList="levelList" />
				</view>
				<view v-if="current === 1">
					<Detail :userLists="userLists" :search="search" :clear="clear" :levelList="levelList" />
				</view>
			</view>
		</view>
		<uni-popup ref="popup" type="center">
			<view class="rule-box">
				<view class="rule-title">
					等级规则
				</view>
				<view class="rule-table">
					<table cellpadding='5'>
						<tr>
							<th>等级</th>
							<th>升级条件</th>
							<th>539元</th>
							<th>2695元</th>
							<th>5390元</th>
						</tr>
						<tr v-for="item in ruleLists" :key="item.grade">
							<td>{{item.grade}}</td>
							<td>{{item.condition}}</td>
							<td>{{item.first}}</td>
							<td>{{item.second}}</td>
							<td>{{item.third}}</td>
						</tr>
					</table>
				</view>
				<view class="rule-attention">
					注：升级以后将获得团队奖励，等级有级差，直推平级奖励10%。
				</view>
				<view class="close-icon" @click="closePopup">
					<image mode="widthFix" style="width: 32rpx" src="@/static/clear.png" alt=""/>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import * as UserApi from '@/api/user';
	import Detail from './inner.vue';
	
	const ruleLists = [{
			grade: '员工',
			condition: '30单',
			first: '45元',
			second: `${45 * 5}元`,
			third: `${45 * 10}元`
		},
		{
			grade: '主管',
			condition: '99单',
			first: '25元',
			second: `${25 * 5}元`,
			third: `${25 * 10}元`
		},
		{
			grade: '经理',
			condition: '199单',
			first: '20元',
			second: `${20 * 5}元`,
			third: `${20 * 10}元`
		},
		{
			grade: '总监',
			condition: '599单',
			first: '15元',
			second: `${15 * 5}元`,
			third: `${15 * 10}元`
		},
		{
			grade: '总经理',
			condition: '1499单',
			first: '10元',
			second: `${10 * 5}元`,
			third: `${10 * 10}元`
		},
		{
			grade: '董事长',
			condition: '9999单',
			first: '5元',
			second: `${5 * 5}元`,
			third: `${5 * 10}元`
		},
	]
	
	export default {
		components: {
			Detail
		},
		data() {
			return {
				current: 0,
				active: 1,
				userInfo: {},
				userLists: [],
				searchValue: '',
				ruleLists,
				levelList: [
					'',
					// '普通员工',
					'/static/employee.jpg',
					// '员工',
					'/static/supervisor.jpg',
					// '主管',
					'/static/manager.jpg',
					// '经理',
					'/static/general-manager.jpg',
					// '总经理',
					'/static/director.jpg',
					// '总监',
					'/static/chairman-board.jpg'
					// '董事长'
				]
			}
		},
		onShow() {
			this.getPageData();
		},
		methods: {
			closePopup() {
				this.$refs.popup.close();
			},
			rankRule() {
				this.$refs.popup.open('center');
			},
			// 印射相应职位
			setLevel(num) {
				return this.levelList[num];
			},
			// 搜索事件
			search(e) {
				const app = this
				app.getUserLists({
					type: app.current + 1,
					name: e.value
				})
			},
			clear() {
				const app = this
				app.getUserLists({
					type: app.current + 1,
					name: ''
				})
			},
			// 获取页面数据
			getPageData() {
				const app = this
				app.isLoading = true
				Promise.all(app.getUserInfo(), app.getUserLists({
						type: app.current + 1,
						name: ''
					}))
					.then(() => app.isLoading = false)
			},
			// 获取直推间推数据
			getUserLists(param) {
				const app = this
				return new Promise((resolve, reject) => {
					UserApi.userLists(param)
						.then(result => {
							app.userLists = result.data.list.data
							resolve(app.userLists)
						})
				})
			},
			// 获取会员信息
			getUserInfo() {
				const app = this
				return new Promise((resolve, reject) => {
					UserApi.info()
						.then(result => {
							app.userInfo = result.data.userInfo
							resolve(app.userInfo)
						})
				})
			},
			onClickItem(e) {
				this.current = e.currentIndex;
				this.getUserLists({
					type: this.current + 1,
					name: ''
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	.team-box {
		.user-info {
			padding: 0 32rpx;

			.user-info-card {
				border-radius: 24rpx;
				background-color: #f8edd6;
				padding: 24rpx;

				.user-info-head {
					display: flex;
					align-items: center;
					margin-bottom: 32rpx;

					.head-img {
						width: 150rpx;
						height: 150rpx;
						border-radius: 50%;
						margin-right: 20rpx;
					}

					.head-info {
						.head-name {
							display: flex;
							margin-bottom: 40rpx;
							.ordinary-user {
								padding: 2rpx 8rpx;
								background-color: #fff;
								border-radius: 12px;
								border: 1px solid #bbbbbb;
								font-size: 20rpx;
								margin-left: 18rpx;
							}
						}

						.progress-bar {
							width: 200px;

							:deep(.uni-steps) {
								width: 200px;
							}

							:deep(.uni-steps__row-text-container) {
								margin-bottom: 0;
							}

							:deep(.uni-steps__row-title) {
								span {
									color: #4f4f4f;
								}
							}

							:deep(.uni-steps__row-line) {
								// &::after {
								background-color: #fc7525;
								// 
								// }
							}
						}

						.inviter {
							font-size: 20rpx;
						}
					}
				}

				.user-info-content {
					display: flex;
					justify-content: space-around;
					margin-bottom: 24rpx;

					.push-title {
						display: flex;
						flex-direction: column;
						align-items: center;
					}

					.direct-push {}

					.indirect-push {}

					.total {}
				}

				.user-info-foot {
					position: relative;
					display: flex;
					justify-content: space-between;

					.interval {
						position: absolute;
						top: 0;
						left: 50%;
						transform: translateX(-50%);
						width: 1px;
						height: 100%;
						background-color: #c8c8c8;
					}

					.total-people {}

					.total-order {}
				}
			}
		}
		.rule-box {
			position: relative;
			display: flex;
			flex-direction: column;
			align-items: center;
			margin: 0 12px;
			background-color: #fff;
			border-radius: 12px;
			padding: 0 12px;
		
			.rule-title {
				font-size: 15px;
				padding: 12px 0;
				font-weight: 600;
			}
		
			.rule-table {
				width: 100%;
				text-align: center;
				padding: 0;
				margin: 0;
				box-sizing: border-box;
		
				table {
					width: 100%;
					border-collapse: collapse;
				}
		
				th {
					border: 1px solid #e6e6e6;
				}
		
				td {
					border: 1px solid #e6e6e6;
				}
			}
		
			.rule-attention {
				font-size: 8px;
				font-weight: 600;
				margin: 12px 0;
			}
		
			.close-icon {
				position: absolute;
				right: 12px;
				top: 8px;
		
				img {
					width: 15px;
				}
			}
		}
	}
</style>
